<script setup>
import { computed, ref } from 'vue';
const ingredient = ref('');
// pinia的使用
import { useAppStore } from '../../../stores/app';
import { toRefs } from 'vue';
const { langIndex } = toRefs(useAppStore());

import input from '../../../assets/data/input.json'
console.log(input);
const stepBasic = computed(() => { return Object.keys(input.Basic).map(key => input.Basic[key]).filter((item, index) => index !== 0 && index !== 1) });
console.log(stepBasic.value);
const stepBasicTitle = computed(() => { return stepBasic.value.map(item => item.lang[langIndex.value]) });
console.log(stepBasicTitle.value);
const stepBasicDesc = computed(() => { return stepBasic.value.map(item => item.def) });
console.log(stepBasicDesc.value);

</script>
<template>
    <div class="flex flex-column gap-2">
        <div v-for="(title, index) in stepBasicTitle" :key="index">
            <form class="flex flex-column gap-2">
                <div>{{ title }}</div>
                <div class="flex flex-wrap gap-2">
                    <div class="flex align-items-center" v-for="(item, index) in stepBasicDesc[index]" :key="index">
                        <RadioButton v-model="ingredient" inputId={{item}} name="CPU Arch" value={{item}} />
                        <label for={{item}} class="ml-2">{{item}}</label>
                    </div>
                </div>
            </form>
        </div>
    </div>
</template>
